<template>
    <section>
        <el-col :span="24">
            <el-table :header-cell-style="{ background: '#F3F4F7', color: '#555' }" :data="styleColour" :max-height="height" border stripe size="mini">
                <el-table-column prop="colour_number" label="编码" width="200" align="center">
                    <template slot-scope="{ row }">
                        {{ row.colour_number }}
                    </template>
                </el-table-column>
                <el-table-column prop="colour" label="名称" width="200" align="center"></el-table-column>
                <el-table-column prop="colour_value" label="颜色展示" width="200" align="center">
                    <template slot-scope="{ row }">
                        <div :style="{background: '#' + Number(row.colour_value).toString(16).padStart(6, '0')}" style="width: 100%; height: 20px"></div>
                    </template>
                </el-table-column>
                <el-table-column label="" align="center"> </el-table-column>
            </el-table>
        </el-col>
    </section>
</template>

<script>

export default {
    name: "designColor",
    props: {
        styleColour:{
            type: Array,
            default: []
        },
        height: {
            type: Number,
            default: 0
        },
        isEdit:{
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            user: {},
            nodeActions: [],
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{

    },
    methods: {

    },
    mounted() {

    }
}
</script>

<style scoped>

</style>
